<template>
    <div class="listbox">
        <!-- <h1>listhezi</h1> -->
        <ul class="listul">
            <li class="listli" v-for="(item,index) in his" :key="index" @click="tz(item.id,item.title)">
                <div class="lititle">{{item.title}}</div>
                <div class="lixq">
                    <span>章节：{{item.zj}}</span>
                    <span>页数：{{item.ys}}</span>
                </div>
            </li>
        </ul>
        <div class="none" v-show="his.length == 0">暂时还什么都没有哦</div>
    </div>
</template>
<script>
export default {
    name:"list",
    created(){
        // console.log(this.$store.state.book.booklist)
        this.his = this.$store.state.book.booklist
        this.$store.commit('changenavshow', true)
    },
    data(){
        return{
            his:[]
        }
    },
    methods:{
        tz(id,title){
            this.$store.commit("book/changenowbookid",id)
            this.$store.commit("book/changenowbooktitle",title)
            this.$router.push("/book")
        }
    }
}
</script>
<style lang="less">
@import '../other/all.less';
.listbox{
    width: 100%;
    padding-top:20px;
    font-size:0.5rem;
}
.listul{
    width: 85%;
    margin:0 auto;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .listli{
        width: 30%;
        margin: 10px;
        // height:20%;
        padding: 10px;
        border:1px solid @allcolor3;
        .lititle{
            width: 100%;
            height:100px;
            background-color: @allcolor2;
            color:white;
            margin-bottom: 10px;
            font-size: 0.4rem;
            padding-top:10px;
            box-sizing: border-box;
        }
        .lixq{
            span{
                font-size: 0.3rem;
                display: block;
            }
        }
    }
}
.none{
    color:@allcolor2;
    font-size:0.6rem;
    margin-top:200px;
    font-family: "楷体";
}
</style>